// 下拉导航栏
var nav = document.querySelector('daohang');
var lis = daohang.children; 
console.log(lis)
for (var i = 0;i < lis.length;i++){
    lis[i].onmouseover = function () {
        this.children[1].style.display = 'block';
    }
    lis[i].onmouseout = function(){
        this.children[1].style.display = 'none';  
    }
}
//图片轮播
window.onload = () => {
  var img = document.querySelectorAll(".img");//返回文档中所有。img
  var left = document.querySelector(".left");//这个是单个元素
  var right = document.querySelector(".right");
  var buttons = document.querySelectorAll(".kuai");

  //设置一个数组，用来存id
  idArr = ["first", "second", "right",  "left", "last"];

  //设置一个变量用来当图片的索引
  var index = 0;

  initialize();//设置初值或执行初始化过程

  //设置一个定时器，让图片轮播，3s后执行next函数
  var timer = setInterval(next, 3000);

 
  left.addEventListener("click", prev); 
  left.addEventListener("mouseover", () => {
    clearInterval(timer);
    timer = null;
  });
  
  left.addEventListener("mouseout", () => {
    timer = setInterval(next, 3000);
  });

  right.addEventListener("click", next);
  right.addEventListener("mouseover", () => {
    clearInterval(timer);
    timer = null;
  });
  right.addEventListener("mouseout", () => {
    timer = setInterval(next, 3000);
  });

  //给小方块添加点击事件
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("mousedown", () => {
      clearInterval(timer);
      timer = null;
      
      if (index > i) {
        let x = index - i;
        while (x--) {
          prev();
        }
      } else if (index < i) {
        let x = i - index;
        while (x--) {
          next();
        }
      }
    });
    buttons[i].addEventListener("mousedown", () => {
      timer = setInterval(next, 3000);
      //让图片继续动起来
    })
  }

  //创建切换图片的函数
  function prev() {
   
    idArr.push(idArr.shift());
    initialize();
    if (index === 0) {
      index = buttons.length - 1;
    } else { 
      index--;
    }
    clearColor();
  }
  function next() {
    idArr.unshift(idArr.pop());
    initialize();
    if (index === buttons.length - 1) {
      index = 0;
    } else {
      index++;
    }
    clearColor();
  }
  //创建一个函数用来让小方块跟随图片运动
  function clearColor() {
    for (let i = 0; i < buttons.length; i++) {
      buttons[i].style.backgroundColor = "silver";
    }
    //让当前的索引变色
    buttons[index].style.backgroundColor = "rgb(20, 134, 187)";
  }
  //创建一个函数用来初始化图片
  function initialize() {
    for (let i = 0; i < img.length; i++) {
      img[i].id = idArr[i];
    }
  }
};
